import React, { Component } from 'react';
import classNames from 'classnames';
import {
  Row,
  Col,
  Button,
  Input,
  Table,
  Modal,
  Form
} from 'antd';
const InputGroup = Input.Group;
const FormItem = Form.Item;
const SearchInput = React.createClass({
  getInitialState() {
    return {
      value: '',
      focus: false,
    };
  },
  handleInputChange(e) {
    this.setState({
      value: e.target.value,
    });
  },
  handleFocusBlur(e) {
    this.setState({
      focus: e.target === document.activeElement,
    });
  },
  handleSearch() {
    if (this.props.onSearch) {
      this.props.onSearch(this.state.value);
    }
  },
  render() {
    const { style, size, placeholder } = this.props;
    const btnCls = classNames({
      'ant-search-btn': true,
      'ant-search-btn-noempty': !!this.state.value.trim(),
    });
    const searchCls = classNames({
      'ant-search-input': true,
      'ant-search-input-focus': this.state.focus,
    });
    return (
      <div className="ant-search-input-wrapper" style={style}>
        <InputGroup className={searchCls}>
          <Input placeholder={placeholder} value={this.state.value} onChange={this.handleInputChange}
                 onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch}
          />
          <div className="ant-input-group-wrap">
            <Button className={btnCls} size={size} onClick={this.handleSearch}>搜索</Button>
          </div>
        </InputGroup>
      </div>
    );
  },
});
const dataSource = [{
  key: '1',
  userNick: '胡彦斌',
  code: 32,
  sign: '西湖区湖底公园1号'
}, {
  key: '2',
  userNick: '胡彦祖',
  code: 42,
  sign: '西湖区湖底公园1号'
}];

const columns = [{
  title: '用户昵称',
  dataIndex: 'userNick',
  key: 'userNick',
}, {
  title: '唯一Code',
  dataIndex: 'code',
  key: 'code',
}, {
  title: '密钥',
  dataIndex: 'sign',
  key: 'sign',
}];


const AddGroupModal = React.createClass({
  getInitialState() {
    return { visible: false };
  },
  showModal() {
    this.setState({
      visible: true,
    });
  },
  handleOk() {
    console.log('点击了确定');
    this.setState({
      visible: false,
    });
  },
  handleCancel(e) {
    console.log(e);
    this.setState({
      visible: false,
    });
  },
  handleSubmit(e) {
    e.preventDefault();
    console.log('收到表单值：', this.props.form.getFieldsValue());
  },
  render() {
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return (
      <div>
        <Button type="primary" onClick={this.showModal} icon="plus">增加组织</Button>
        <Modal title="增加组织" visible={this.state.visible}
               onOk={this.handleOk} onCancel={this.handleCancel}
        >
          <Form horizontal onSubmit={this.handleSubmit}>
            <FormItem {...formItemLayout} label="用户昵称">
              <Input placeholder="请输入用户昵称"/>
            </FormItem>
            <FormItem {...formItemLayout} label="唯一CODE">
              <Input placeholder="请输入唯一CODE"/>
            </FormItem>
            <FormItem {...formItemLayout} label="签名密钥">
              <Input placeholder="请输入签名密钥"/>
            </FormItem>

          </Form>
        </Modal>
      </div>
    );
  },
});

export default class GroupPage extends Component {


  render() {

    return(
      <div >
        <Row className="user-page">
          <Col span={12}>
            <AddGroupModal/>
          </Col>
          <Col span={12}>
            <Row type="flex" align="middle" justify="end">
              <SearchInput placeholder="input search text"
                           onSearch={value => console.log(value)} style={{ width: 200 }}
              />
            </Row>
          </Col>
        </Row>
        <Row>
          <Table dataSource={dataSource} columns={columns} bordered/>
        </Row>
      </div>
    )
  }
}

